<template>
  <div class="container">
      <Header></Header>
      <div class="cover" :style="{'background-image': 'url('+getImgUrl(info.bg_thumb?info.bg_thumb:'')+')', width: '100%', height: '10.15rem'}"></div>
    <div class="box">
      <div class="img">
        <img :src="getImgUrl(info.thumb )">
      </div>
      <div class="name">
        <h3>{{info.title}}</h3>
        <div class="theme-color">{{info.sort_title}}</div>
      </div>
    </div>
    <div class="box" style="padding: 0px 0.75rem;
    color: rgb(97, 97, 97);
    font-size: 0.6rem;
    border-bottom: 0.35rem solid rgb(239, 243, 247);margin-top:0px">
      <article>
        <h4>学校介绍</h4>
        <p> {{info.desc}}</p>
      </article>
    </div>

    <div style="margin:.681rem" v-html="htmlHanlde(info.content)">

    </div>
  </div>
</template>

<script>
  import Header from './../../../../components/header/Header'
  import { getArticleInfo } from "@/service/index.js";

    export default {
  name: "CollegeItemIntru",
        components: {
            Header
        },
  data() {
    return {
      id: this.$route.query.id,
      activeNames: ["1"],
      info:{},
    };
  },
  created(){
     getArticleInfo({ id: this.id })
      .then((response) => {
        console.log(response);
        if (response.code == 200) {
          this.info = response.data.info;
        }
      })
      .catch((err) => {
        console.log(err);
      });
      console.log(this.info)
  },
  methods:{
    majorDetail(){
      this.$router.push({path:'/majorIntroduce'})
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .cover {
    background-image: url("https://api.lxbird.com/image/banner/au_macau.jpg");
    width: 100%;
    height: 10.15rem;
  }


.box .major {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    color: rgb(97, 97, 97);
    font-size: 0.6rem;
}
.item {
    width: 3.7rem;
    flex-shrink: 0;
    margin-top: 1rem;
    text-align: center;
}
.icon {
    margin: 0px auto 0.25rem;
    background: rgb(239, 243, 247);
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-size: 0.9rem;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
.icon img {
    width: 0.9rem;
}
.alumni {
    font-size: 0.6rem;
    color: rgb(97, 97, 97);
    margin: 0.75rem 0.75rem 0.5rem;
}
  .img {
    width: 4.25rem;
    height: 4.25rem;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .name {
    margin-left: 0.5rem;
    font-size: 0.5rem;
  }
  h3 {
    font-size: 0.9rem;
    color: rgb(42, 65, 84);
    font-weight: normal;
    margin-bottom: 0.15rem;
  }
  .theme-color {
    color: #00a4ff !important;
  }
  
  .box article {
    padding: 0px 0.375rem;
  }
  .box article h4 {
    font-weight: normal;
    line-height: 1;
  }
  .box article p {
    margin: 0.5rem 0px 1rem;
    line-height: 0.85rem;
  }
   .child {
    display: -webkit-box;
    -webkit-box-align: center;
    align-items: center;
    border-bottom: 1px solid rgb(221, 224, 228);
}
 .button {
    margin-left: 0.25rem;
    flex-shrink: 0;
    width: 2.15rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    font-size: 0.5rem;
    border: 1px solid;
    border-radius: 10rem;
}
.theme-border {
    border-color: #00a4ff !important;
}
.theme-color {
    color: #00a4ff !important;
}
}

.box{
    margin: -2.35rem 0.35rem 0px;
    padding: 0.95rem 0.5rem;
    background: rgb(255, 255, 255);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
</style>
